<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="xsl">
    <script src="jquery-3.1.1.js"></script>
    <title>显示遮罩层</title>
    <style>
        .outer {
            width: 336px;
            margin: 50px auto;
            /*background-color: #ccc;*/
        }
        .bd {
            padding: 0;
            margin: 0;
            width: 320px;
            position: relative;
        } 
        .bd span {
            display: inline-block;
            width: 320px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            top: 408px;
            left: 8px;
            border: 8px solid #fff;
        }    
        .bd img{
            width: 320px;
            height: 400px;
            position: absolute;
            top: 8px;
            left: 8px;
            border: 8px solid #fff;
        }
        .bgc{
            width: 352px;
            height: 532px;
            margin: 50px auto;
            background-color: orange;
            box-sizing: border-box;
            display: none;
        }
        .zhao{
            position: absolute;
            top: 600px;
            display: flex;
        }
        .zhao img{
            width: 160px;
            height: 160px;
            margin-left: 5px;
        }
        .zhao span{
            position: absolute;
            width: 160px;
            height: 160px;
            background-color: #000;
            opacity: 0;
            color: white;
            text-align: center;
            top: 0;
            /*z-index: 22;*/
        }
        .zhao .first,.text1{
            left: 5px;
        }
        .zhao .last,.text2{
            left: 170px;
        }
        .text1,.text2{
            display: inline-block;
            height: 160px;
            position: absolute;
            text-align: center;
            text-indent: 2;
            overflow: hidden;
            width: 0;
            color: #fff;
            line-height: 160px;
            top: -14px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="bd">
            <div class="bgc"></div>
            <img src="img/timg0.jpg" alt="">
            <span>《阴阳师》是由中国网易移动游戏公司自主研发的3D日式和风回合制RPG手游.</span>
        </div>
        <div class="zhao">
            <div class="hh">
                <img src="img/timg01.jpg" alt="">
                <span class="first"></span>
                <p class="text1">萤草:树妖四件套,222</p>
            </div>
            <div class="hh">
                <img src="img/timg02.jpg" alt="">
                <span class="last"></span>
                <p class="text2">青行灯:破势,破势,破势</p>
            </div>
        </div>
    </div>
</body>

</html>
<script>
   // 鼠标移上背景颜色渐变,离开消失
    $('.bd').hover(function(){
        $('.bgc').stop().fadeIn(500)
    },function(){
        $('.bgc').stop().fadeOut(500)
    })
    // 改变透明度
    $('.hh').hover(function(){
         $(this).find('span').stop().animate({
             opacity:0.5,
         },200)
         $(this).find('p').stop().animate({
             width:'160px',
         },200)
    },function(){
         $(this).find('span').stop().animate({
             opacity: 0,
         },200)
         $(this).find('p').stop().animate({
             width:'0px',
         },200)
    })
</script>